/**
 * Created by bigding on 2016/7/4.
 */
var begin = false,posi_num = 0;
var posi = new Array();                             //定义位置数组
//var inpath="D:\\1.jpg"      测试用的
 

for(var i = 0; i<100 ; i++){
    posi[i] = new Array(0,0);
    //console.log(i);
}
window.onload= function () {
    var screen = document.getElementById("myCanvas");           //获取元素
    var bg = document.getElementById("bg"); 

    var ctx,mouseX,mouseY;
	var sW,sH;
	sW = screen.offsetWidth;
	sH = screen.offsetHeight;

	var imgW,imgH;
	

	if(screen.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        ctx = screen.getContext("2d");
		
	}
	
	ctx.fillStyle= 'rgba(255, 255, 255, 0)';

	
	
	
	
    screen.onclick = function (event) {
        mouseX=getMousePos(1,event);                        //获取当前鼠标点击的横纵位置
        mouseY=getMousePos(2,event);
        //console.log("X:"+mouseX+"\tY:"+mouseY+"\tnum:"+posi_num);
        posi[posi_num][0] = mouseX;             //将点击的位置存入数组中
        posi[posi_num][1] = mouseY;
     


        if (posi_num>1 && Math.abs(posi[posi_num][0]-posi[0][0])<20 && Math.abs(posi[posi_num][1]-posi[0][1])<20)
        {
        	


 			ctx.lineTo(posi[posi_num-1][0], posi[posi_num-1][1]);
            ctx.lineTo(posi[0][0], posi[0][1]);
            ctx.lineWidth = 5;



        	ctx.fillStyle="blue";
            ctx.fill();
            ctx.stroke();
       
        }
        else{
        	 drawLine(posi_num);
        	 posi_num++;
        }
       
    }
	
	

	document.getElementById("open_file").onchange = function readFile()
	{
		var file = document.getElementById("open_file").files[0];
		var reader = new FileReader();
		reader.readAsDataURL(file);    //转化为base64的数据类型
	
		reader.onload = function(e){
			drawToCanvas(this.result);
			
		}
	}
	function drawToCanvas(imgData)
	{
		var img = new Image;
		var bg_ctx;


		//alert(imgData);
		img.src = imgData;
		imgW = img.width;
		imgH = img.height;
		
		if(bg.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        bg_ctx = bg.getContext("2d");

		
	}

		img.onload = function(){bg_ctx.drawImage(img,0,0,sW,imgH*(sW/imgW));}
		bg_ctx.stroke();
	}

	
	
	
	var eraseAllButton = document.getElementById("eraseAllButton");
	
	eraseAllButton.onclick = function(e){
		ctx.clearRect(0, 0, screen.width, screen.height);
		
		for(var i = 0; i<100 ; i++){
		posi[i] = new Array(0,0);
	
		}		
		
		posi_num=0;
		/*
		var img=new Image()
		img.src=img64
		img.onload = function(){bg_ctx.drawImage(img,0,0,sW,imgH*(sW/imgW));}
		*/
		ctx.beginPath();

		};


//此处是将抠取的图片保存到本地。
//如果修改为上传到服务器从此处删除到onload尾部

		var end =document.getElementById("end");
		end.onclick = function(){
			var type = 'png';
    		download(type);
		}


	//图片下载操作,指定图片类型
	function download(type) {
    	//设置保存图片的类型
    	var imgdata = screen.toDataURL(type);
   		 //将mime-type改为image/octet-stream,强制让浏览器下载
    	var fixtype = function (type) {
        type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
        var r = type.match(/png|jpeg|bmp|gif/)[0];
        return 'image/' + r;
    }
    imgdata = imgdata.replace(fixtype(type), 'image/octet-stream')
    //将图片保存到本地
    var saveFile = function (data, filename) {
        var link = document.createElement('a');
        link.href = data;
        link.download = filename;
        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        link.dispatchEvent(event);
    }
    var filename = new Date().toLocaleDateString() + '.' + type;
    saveFile(imgdata, filename);
}





}//onload结束部分



function getMousePos(num,event) {                       //获取位置信息
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft; //屏幕滚动像素
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    if(num == 1)   return e.clientX;
    else return e.clientY;
}
function drawLine(num){
    var canvas = document.getElementById("myCanvas");           //获取元素
    var ctx;
    if(canvas.getContext) {
        //获取对应的CanvasRenderingContext2D对象(画笔)
        ctx = canvas.getContext("2d");

        //开始一个新的绘制路径
      //  ctx.beginPath();
        //设置线条颜色为黑色
        ctx.strokeStyle = "yellow";
        if(num == 0){}  //绘制直线线段起始坐标点
        //    ctx.moveTo(posi[num][0], posi[num][1]);
        else{
            //绘制直线线段到指定坐标点
            ctx.lineTo(posi[num-1][0], posi[num-1][1]);
            ctx.lineTo(posi[num][0], posi[num][1]);
            ctx.lineWidth = 5;
            ctx.stroke();
        }
        //先关闭绘制路径。注意，此时将会使用直线连接当前端点和起始端点。
        //ctx.closePath();
    }
}

	


